<template>
  <div class="google-map-marker">
    <i
      class="el-icon-location"
      :style="{
        color: lineColor,
      }"
    >
    </i>
    <div>{{ index }}</div>
    <el-dialog width="600px" :title="title" destroy-on-close close-on-click-modal append-to-body :visible.sync="show">
      <div>this is {{ index }}</div>
      <!-- <div slot="footer">{{ trans('新增') }}</div> -->
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: [String, Number],
    },
    lineColor: {
      type: [String, Number],
    },
    index: {
      type: [String, Number],
    },
  },
  data() {
    return {
      show: false,
    }
  },
  methods: {
    handleClickMarker() {
      this.show = true
    },
  },
}
</script>

<style lang="scss">
.google-map-marker {
  display: flex;
  // align-items: center;
  // justify-content: center;
  background: transparent;
  position: relative;
  i {
    font-size: 45px;
  }
  div {
    position: absolute;
    font-weight: bold;
    left: 50%;
    top: 43%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    font-size: 16px;
  }
}
</style>
